<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: radial-gradient(white, black);
            background-repeat: no-repeat;
        }
        
        body {
            width: 100%;
            height: 100%;
        }
        
        main {height: 100%;
            position: relative;
          
       transform-style: preserve-3d;
     

       animation: dong 12s linear infinite ; }
        @keyframes dong {0% {transform: rotateY(0deg) ;}
       100% {transform: rotateY(360deg)  ; }}
        div {
           
            width: 400px;
            height: 400px;
            position: absolute;
            left: calc(50% - 400px/2);
            top: calc(50% - 400px/2);
            border: 10px solid white;
        }
        
      
        #a{
            background-image: url(10.jpg);
            background-size: 100%;
transform: translateZ(400px);
        }
        
        #b{
            background-image: url(20.jpg);
             background-size: 100%;
       transform: translateZ(-400px); }
        
        #c{
            background-image: url(30.jpg);
        background-size: 100%; 
        transform:rotateY(60deg)  translateZ(400px)  ;}
        
        #d{
            background-image: url(40.jpg);
        background-size: 100%; 
        transform:rotateY(60deg) translateZ(-400px)  ;}
        
        #e{
            background-image: url(50.jpg);
        background-size: 100%;
        transform:rotateY(-60deg) translateZ(400px)  ; }
        
        #f{
            background-image: url(60.jpg);
        background-size: 100%;
        transform: rotateY(-60deg) translateZ(-400px)  ; }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>六边动态</title>
</head>

<body>
    <main>
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
        <div id="e"></div>
        <div id="f"></div>
    </main>

</body>

</html>